<template>
    <div class="home" ref="homeRef">
        <title-banner></title-banner>
        <search-box></search-box>
        <categories></categories>
        <content></content>
    </div>
</template>

<script>
    export default {name:"home"}
</script>

<script setup>
import titleBanner from "./cpns/title-banner/title-banner.vue"
import searchBox from "./cpns/search-box/search-box.vue"
import categories from "./cpns/categories/categories.vue"
import content from "./cpns/content/content.vue"
import getScroll from "@/utils/scroll.js"
import { ref,onMounted,watch } from "vue"
import useHomeStore from "@/store/modules/home"

const homeRef = ref() 
const homeStore = useHomeStore()

const { isBottom,scrollTop } = getScroll(homeRef)
watch(scrollTop,() => {
    console.log("scrollTop");
    if (isBottom.value) {
        homeStore.fetchHouseListAction()
    }
})
</script>


<style lang='less' scoped>
.home {
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 50px;
}
</style>